<!doctype html>
<html>
<head>
    <base href="/" >
    <title>Cart</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
            word-break: break-all;
        }

        th:first-child, td:first-child {
            width: 40%;
        }

        th:nth-child(2), td:nth-child(2) {
            width: 20%;
        }

        th:nth-child(3), td:nth-child(3) {
            width: 15%;
        }

        th:last-child, td:last-child {
            width: 25%;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        .ring-in {
            display: flex;
            align-items: center;
        }

        .ring-in img {
            max-width: 50px;
            margin-right: 10px;
        }
    </style>
    <link href="cart/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="cart/css/style.css" rel="stylesheet" type="text/css" media="all">
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content="Shopin Responsive web template, Bootstrap Web Templates, Flat Web Templates, AndroId Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design">
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--theme-style-->
    <link href="cart/css/style4.css" rel="stylesheet" type="text/css" media="all">
    <!--//theme-style-->
    <script src="cart/js/jquery.min.js"></script>
    <!-- start-rate---->
    <script src="cart/js/jstarbox.js"></script>
    <link rel="stylesheet" href="cart/css/jstarbox.css" type="text/css" media="screen" charset="utf-8">
    <script type="text/javascript">
        jQuery(function () {
            jQuery('.starbox').each(function () {
                var starbox = jQuery(this);
                starbox.starbox({
                    average: starbox.attr('data-start-value'),
                    changeable: starbox.hasClass('unchangeable') ? false : starbox.hasClass('clickonce') ? 'once' : true,
                    ghosting: starbox.hasClass('ghosting'),
                    autoUpdateAverage: starbox.hasClass('autoupdate'),
                    buttons: starbox.hasClass('smooth') ? false : starbox.attr('data-button-count') || 5,
                    stars: starbox.attr('data-star-count') || 5
                }).bind('starbox-value-changed', function (event, value) {
                    if (starbox.hasClass('random')) {
                        var val = Math.random();
                        starbox.next().text(' ' + val);
                        return val;
                    }
                })
            });
        });
    </script>
    <!--//End-rate---->
</head>
<body>
<!--banner-->
<div class="banner-top">
    <div class="container">
        <h1>Cart</h1>
        <em></em>
        <h2><a href="shopping/index">Home</a></h2>
    </div>
</div>
<!--login-->
<!--<script>$(document).ready(function (c) {-->
<!--    $('.close1').on('click', function (c) {-->
<!--        $('.cart-header').fadeOut('slow', function (c) {-->
<!--            $('.cart-header').remove();-->
<!--        });-->
<!--    });-->
<!--});-->
<!--</script>-->
<!--<script>$(document).ready(function (c) {-->
<!--    $('.close2').on('click', function (c) {-->
<!--        $('.cart-header1').fadeOut('slow', function (c) {-->
<!--            $('.cart-header1').remove();-->
<!--        });-->
<!--    });-->
<!--});-->
<!--</script>-->
<!--<script>$(document).ready(function (c) {-->
<!--    $('.close3').on('click', function (c) {-->
<!--        $('.cart-header2').fadeOut('slow', function (c) {-->
<!--            $('.cart-header2').remove();-->
<!--        });-->
<!--    });-->
<!--});-->
</script>
<div class="container">
    <div class="check-out">
        <div class="bs-example4" data-example-id="simple-responsive-table">
            <div class="table-responsive">
                <table class="table-heading simpleCart_shelfItem">
                    <colgroup>
                        <col style="width: 25%;">
                        <col style="width: 25%;">
                        <col style="width: 25%;">
                        <col style="width: 25%;">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>项目</th> <!--class="table-grid"-->
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                    </tr>
                    </thead>
                    <tbody id="cartbox">
<!--                    <tr class="cart-header" >-->
<!--                        <td class="ring-in"><a href="single.html" class="at-in"><img src="cart/images/ch.jpg" class="img-responsive" alt=""></a>-->
<!--                            <input type="checkbox" name="check" checked>-->
<!--                            <div class="sed">-->
<!--                                <h5><a href="single.html">Sed ut perspiciatis unde</a></h5>-->
<!--                            </div>-->
<!--                            <div class="clearfix">-->
<!--                            </div>-->
<!--                            <div class="close1">-->
<!--                            </div>-->
<!--                        </td>-->
<!--                        <td>$100.00</td>-->
<!--                        <td>FREE SHIPPING</td>-->
<!--                        <td class="item_price">$100.00</td>-->
<!--                    </tr>-->
                    </tbody>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="produced">
            <a  class="hvr-skew-backward" id="checkoutbtn" style="cursor:pointer">结算</a>
        </div>
    </div>
</div>
<!--//login-->
<
<!--//brand-->
<!--//content-->


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="cart/js/simpleCart.min.js"></script>
<!-- slide -->
<script src="cart/js/bootstrap.min.js"></script>

<script src="layui/layui.all.js"></script>

<script id="cartitem" type="text/html">
    <tr class="cart-header" cartname="cartitem">
        <td class="ring-in">
            <input type="checkbox" easyname="cartcheck" checked />
            <a href="single.html" class="at-in"><img src="cart/images/ch.jpg" easyname="cartimg" alt=""/></a>
            <div class="sed">
                <h5><a href="single.html" easyname="cartname">Sed ut perspiciatis unde</a></h5>
            </div>
            <div class="clearfix"></div>
            <div class="close1" cartproductid=""></div>
        </td>
        <td easyname="cartprice">$100.00</td>
        <a cartproductid="" id="subtract">-</a>
        <td cartproductid="" id="number" easyname="cartnumber">1</td>
        <a cartproductid="" id="push">+</a>
        <td class="item_price" easyname="totalprice">$100.00</td>
    </tr>
</script>

<script>
    const $=layui.$;
    const layer = layui.layer;
    showCarts();
    function showCarts(){
        $.ajax({
            url:'cart/getCarts',
            async:false,
            success:function (result) {
                let data=result.data;
                let itemtext=$('#cartitem').text();
                for(let i=0;i<data.length;i++){
                    let $item=$(itemtext);
                    $item.find("[easyname='cartimg']").attr("src",data[i].product.imgurl);
                    $item.find("[easyname='cartname']").text(data[i].product.name);
                    $item.find("[easyname='cartnumber']").text(data[i].number);
                    $item.find("[easyname='cartprice']").text(data[i].product.price);
                    $item.find("[easyname='totalprice']").text(data[i].product.price*data[i].number);
                    $item.find("[cartproductid]").attr("cartproductid",data[i].productid);
                    $("#cartbox").append($item);
                }
            }
        });
    }


    //删除
    $(".close1").click(function() {
        let productid=$(this).attr("cartproductid");
        let $this=$(this);
        layer.confirm("确认删除数据吗?", function () {
            $.ajax({
                url: 'cart/delete',
                data: {productid:productid},
                success:function (result){
                    let code=result.code;
                    console.log(code);
                    let data=result.data;
                    let msg=result.msg;
                    if(code!=401){
                        //重新加载数据
                        // showCarts();
                        $this.parents("[cartname='cartitem']").remove();
                        //提示删除成功
                        layer.msg(msg,{icon:1,time:1800});
                    }
                }

            })
        })
    });





    $("[substract]").click(function() {
           let $numberDom=$(this).siblings("[name='number']");
           let oldNumber=$numberDom.val();
           let newNumber=Number(oldNumber)-1;
           let productid=$(this).attr("cartproductid");
           changeNumber($numberDom,productid,newNumber);
    });

    $("body").on("click","[push]",function(){});
    $("[push]").click(function() {
        let $numberDom=$(this).siblings("[name='number']");
        let oldNumber=$numberDom.val();
        let newNumber=Number(oldNumber)+1;
        let productid=$(this).attr("cartproductid");
        changeNumber($numberDom,productid,newNumber);
    });
    $("[name='number']").blur(function(){
        let productid=$(this).attr("cartproductid");
        let $dom=$(this);
        let number=$(this).val();
        changeNumber($dom,productid,newNumber);
    });
    function changeNumber(dom,productid,newNumber){
        let $domNumber=dom;
        $.ajax({
            url:'cart/edit',
            data:{productid:productid,number:number},
            success:function(result){
                if(result.code==200){
                    layer.msg(result.msg,{icon:2,time:1800});
                    $domNumber.val(result.data);
                    }else{
                    layer.msg(result.msg,{icon:2});
                    $domNumber.val(result.data);
                }
            }
        });
    }

</script>
<script>
    $("#checkoutbtn").click(function () {
        // 准备数据
        let productids = "";
        let counts = "";

        // 遍历所有被选中的复选框
        $("[easyname='cartcheck']:checked").each(function () {
            let $cartItem = $(this).closest("[cartname='cartitem']");
            let productid = $cartItem.find("[cartproductid]").attr("cartproductid");
            let count = $cartItem.find("[easyname='cartnumber']").text();

            productids += productid + ",";
            counts += count + ",";
        });

        // 去掉最后的逗号
        if (productids.length > 0) {
            productids = productids.substring(0, productids.length - 1);
            counts = counts.substring(0, counts.length - 1);

            // 跳转到结算页面
            location.href = "shopping/checkout?productids=" + productids + "&counts=" + counts;
        } else {
            layer.msg("请选择需要购买的商品", { icon: 6, time: 2000 });
        }
    });
</script>

</body>
</html>